<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">

<head th:replace="component/head :: head"></head>

<body>
	<header th:replace="component/header :: header"></header>

	<!-- Begin page content -->
	<div class="container">
		<div class="row">
			<div th:replace="component/sidebar"></div>
			<div class="col-md-9">
				<div th:replace="component/page-title::pageTitle('修改密码')"></div>

				<div class="row">
					<div class="col-md-6 offset-md-3">
						<form class="needs-validation" novalidate
							action="/user/update-password" method="post">
							<div class="form-group">
								<label for="inputpassword1">原密码：</label> <input type="password"
									class="form-control" id="inputpassword1" name="oldPassword"
									required />
								<div class="invalid-feedback">密码不能为空</div>
							</div>
							<div class="form-group">
								<label for="inputpassword2">新密码：</label> <input type="password"
									class="form-control" id="inputpassword2" name="newPassword"
									required />
								<div class="invalid-feedback">密码不能为空/新密码与原密码相同</div>
							</div>
							<div class="form-group">
								<label for="inputpassword2">确认密码：</label> <input type="password"
									class="form-control" id="inputpassword3"
									name="confirmNewPassword" required />
								<div class="invalid-feedback">密码不能为空/两次输入的密码不一致</div>
							</div>
							<button type="submit" class="btn btn-primary btn-block">下一步</button>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- End page content -->

	<footer th:replace="component/footer :: footer"></footer>

	<script>
		function verifyPasswordIdentical() {
			var newPassword = document.getElementById("inputpassword1").value;
			var confirmNewPassword = document.getElementById("inputpassword2").value;

			if (newPassword = confirmNewPassword) {
				//验证不通过
				document.getElementById("inputpassword1").classList
						.remove("is-valid");
				document.getElementById("inputpassword1").classList
						.add("is-invalid");
				document.getElementById("inputpassword2").classList
						.remove("is-valid");
				document.getElementById("inputpassword2").classList
						.add("is-invalid");

				return false;
			} else {
				//验证通过
				document.getElementById("inputpassword1").classList
						.remove("is-invalid");
				document.getElementById("inputpassword1").classList
						.add("is-valid");
				document.getElementById("inputpassword2").classList
						.remove("is-invalid");
				document.getElementById("inputpassword2").classList
						.add("is-valid");

				return true;
			}
		}

		function verifyPasswordIdentical() {
			var newPassword = document.getElementById("inputpassword2").value;
			var confirmNewPassword = document.getElementById("inputpassword3").value;

			if (inputpassword2 != inputpassword3) {
				//验证不通过
				document.getElementById("inputpassword2").classList
						.remove("is-valid");
				document.getElementById("inputpassword2").classList
						.add("is-invalid");
				document.getElementById("inputpassword3").classList
						.remove("is-valid");
				document.getElementById("inputpassword3").classList
						.add("is-invalid");

				return false;
			} else {
				//验证通过
				document.getElementById("inputpassword2").classList
						.remove("is-invalid");
				document.getElementById("inputpassword2").classList
						.add("is-valid");
				document.getElementById("inputpassword3").classList
						.remove("is-invalid");
				document.getElementById("inputpassword3").classList
						.add("is-valid");

				return true;
			}
		}
		// Example starter JavaScript for disabling form submissions if there are invalid fields
		(function() {
			'use strict';
			window.addEventListener('load',
					function() {
						// Fetch all the forms we want to apply custom Bootstrap validation styles to
						var forms = document
								.getElementsByClassName('needs-validation');
						// Loop over them and prevent submission
						var validation = Array.prototype.filter.call(forms,
								function(form) {
									form.addEventListener('submit', function(
											event) {
										if (form.checkValidity() === false) {
											event.preventDefault();
											event.stopPropagation();
										}
										form.classList.add('was-validated');
									}, false);
								});
					}, false);
		})();
	</script>

	<div th:replace="component/footer-lib"></div>
</body>

</html>